<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/layui.css" rel="stylesheet">
    <script src="../layui.js"></script>
</head>
<body>
    <div style="padding: 16px;">
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">创建人</label>
                    <div class="layui-input-block">
                        <select name="creator" lay-filter="creator">
                            <option value=""></option>
                            <option value="女娲">女娲</option>
                            <option value="夏娃">夏娃</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="startTime" id="startTime" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="endTime" id="endTime" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="queryPerson">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

        <table class="layui-hide" id="person_table" lay-filter="person_table"></table>
    </div>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="reload">刷新</button>

        </div>
    </script>
    <script type="text/html" id="toolPerson">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
            <a class="layui-btn layui-btn-xs" lay-event="more">
                更多
                <i class="layui-icon layui-icon-down"></i>
            </a>
        </div>
    </script>

<!--    渲染-->
    <script>
        layui.use(['table', 'form', 'jquery', 'layer', 'laydate'], function (){
            var $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var table = layui.table;
            var dropdown = layui.dropdown;
            var laypage = layui.laypage;

            //初始化渲染日期时间组件
            laydate.render({
                elem: "#startTime",//绑定表单元素中的id属性值
                type: 'datetime' //控件类型，默认是date
            });
            //初始化渲染日期时间组件
            laydate.render({
                elem: "#endTime",//绑定表单元素中的id属性值
                type: 'datetime' //控件类型，默认是date
            });
            //     一个渲染一个组件
            //渲染数据表格
            //     设定值，可以用于重载
            var tableIns = table.render({
                elem: '#person_table'//table表格id属性
                ,height: 'fell-35'//全屏减多少px
                ,url: '/persons/page' //数据接口
                ,toolbar: '#toolbarDemo' //工具条 default默认，true只有右侧标，‘#id'开启自定义<script>
                ,defaultToolbar: [{ // 右上角工具图标
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips',
                    onClick: function(obj) { // 2.9.12+
                        layer.alert('自定义工具栏图标按钮');
                        }
                    }, 'filter', 'exports', 'print']
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'tb_num',type: 'numbers', title: '序号',width: 80, fixed: 'left'}
                    ,{field: 'id', title: 'ID', width:80, sort: true, hide: true}
                    ,{field: 'username', title: '用户名',align:'center', width:180}
                    ,{field: 'password', title: '密码',align:'center', width:80}
                    ,{field: 'createdate', title: '创建时间',align:'center', width:180, sort: true}
                    ,{field: 'creator', title: '创建人',align:'center',  width: 140}
                    ,{fixed: 'right', title: '操作', width: 150, align:'center', toolbar: '#toolPerson'}
                ]]
                ,limit: 8
                ,limits: [4,8,20,50, 100]
                , parseData: function (res){
                    return {//返回值和layui默认格式差异，需设置
                        "code": res.code,
                        "data": res.data.slice(0, this.limit),
                        "msg": res.msg,
                        "count": res.total //获取数据总数值
                    }
                },
            });
            // 表单渲染
            //其中： submit（）是layui中form表单的提交事件
            //queryPerson是lay-filter的属性值
            form.on("submit(queryPerson)", function (data){
                console.log(data);
                tableIns.reload({
                    where: data.field,
                    page:{
                        curr: 1
                    }
                });
                return false;
            });
            //重载、刷新数据
         //工具栏事件
            //person_table谁的工具栏
            table.on('toolbar(person_table)', function (obj){

                switch (obj.event){
                    //刷新
                    case 'reload':
                        tableIns.reload({
                            where: {
                                url: '/persons/page'
                            },
                            page:{
                                curr: 1
                            }
                        });
                        break;
                }
            });


            // 触发单元格工具事件
            //
            table.on('tool(person_table)', function(obj){ // 双击 toolDouble
                var data = obj.data; // 获得当前行数据
                //console.log(data)
                if(obj.event === 'detail'){
                    //layer.msg('查看操作，当前行 ID:'+ data.id);
                    $.post("/persons/info",{"id": data.id},function (result){
                        console.log(result.data[0].content)
                        if(result.msg === "success"){
                            layer.alert('用户名:'+data.username + '<br><p>'+result.data[0].content+'</p><br>密码:'+data.password +
                                '<br>创建时间:'+data.createdate + '<br>创建人:'+data.creator,{
                                area: ['300px']
                            });
                        }
                    });
                } else if(obj.event === 'more'){
                    // 更多 - 下拉菜单
                    dropdown.render({
                        elem: this, // 触发事件的 DOM 对象
                        show: true, // 外部事件触发即显示
                        data: [{
                            title: '编辑',
                            id: 'edit'
                        },{
                            title: '删除',
                            id: 'del'
                        }],
                        click: function(menudata){
                            if(menudata.id === 'edit'){
                                layer.open({
                                    title: '编辑 - id:'+ data.id,
                                    type: 1,
                                    area: ['80%','80%'],
                                    content: '<div style="padding: 16px;">自定义表单元素</div>'
                                });
                            } else if(menudata.id === 'del'){
                                layer.confirm('真的删除行么?'+ data.id + ":" + data.username, function(index) {
                                    $.post("/persons/del",{"id": data.id},function (result){
                                        if(result.msg === "success"){
                                            tableIns.reload({
                                                done: function(res, curr){
                                                    // console.log(res);
                                                    // console.log(curr);
                                                    if(curr>1 && res.data.length === 0){
                                                        //curr--; //这个地方要是写减一,只是方便阅读
                                                        //  这儿不用减,curr就是当前页面的上一页
                                                        tableIns.reload({
                                                            page: {
                                                                curr: curr
                                                            //     上面减了,这儿要加了1，不然要显示多减1页
                                                            }
                                                        });
                                                    }
                                                }
                                            });
                                            layer.close(index);
                                        }
                                    });
                                    // obj.del(); // 删除对应行（tr）的DOM结构
                                    // // 向服务端发送删除指令
                                });
                            }
                        },
                        id: 'dropdown-table-tool',
                        align: 'right', // 右对齐弹出
                        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                    });
                }
            });
        });



    </script>
</body>
</html>